<template>
  <div class="shop">
    <div class="head">
      <mt-header title="购物车" class="head">
        <mt-button icon="more" slot="right" @click="gg"></mt-button>
      </mt-header>
    </div>
    <div class="shop-list">
      <div class="commodity" v-for="(item,index) in commodity" :key='index'>
        <div class="opt">
          <div class="circular" @click="selected($event,index)" ref="selectItem" ></div>
        </div>
        <div class="commodity-img">
          <router-link to="/details">
            <img class="c-Img" src="/" alt="图片尚未加载">
          </router-link>
        </div>
        <div class="commodity-describe">
          <div class="commodity-name">{{item.name}}</div>
          <div class="commodity-dispose">{{item.color}}</div>
          <div class="commodity-shopprice" >
              <div class="commodity-price"><span class="fh">￥</span><span class="price">{{item.price}}</span></div>
              <div class="commodity-num" v-if="pd==1"><button class="add" @click="item.num<item.kc?item.num++:item.num=item.kc">+</button>
                <span class="shop-num" >{{item.num}}</span>
                <button @click="item.num>0?item.num--:item.num=0"
                        class="reduce" >-</button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="buy">
      <div>
        <div class="Circular" @click="Allselect"  v-if="this.selectedArr.includes(false)"></div>
        <div class="Circular active" @click="AllselectCancel" v-else></div>
        <span>全选</span>
      </div>
      <div v-if="pd==1" class="price-total">
        <p class="buy-total"><span>总计:￥</span><span>{{this.total}}</span></p>
        <div class="buy-js">结算({{this.num}})</div>
      </div>
      <div class="Price-total" v-else>
        <button class="buy-js">删除</button>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  @baseSize:37.5;
  .px2rem(@name,@px){
      @{name}:@px / @baseSize /2* 1rem;
  }
  .head{
    .px2rem(height,100);
    .px2rem(font-size,40);
  }
  //商品列表
  .commodity{
    .px2rem(width,730);
    .px2rem(height,180);
    .px2rem(margin,10);
    .px2rem(border-radius,10);
    display: flex;
    background: #f7f7f7;
  }

  //选择
  .opt{
    flex: 1;
    .px2rem(height,180);
    text-align: center;
  }
  .circular{
    .px2rem(width,35);
    .px2rem(height,35);
    .px2rem(margin-left,15);
    .px2rem(margin-top,70);
    border: 1px solid black;
    border-radius: 50%;
  }
  .active{
    background: #3F3F3F;
  }
  .Circular{
    .px2rem(width,30);
    .px2rem(height,30);
    .px2rem(line-height,30);
    .px2rem(margin-right,20);
    vertical-align:middle;
    border: 1px solid black;
    border-radius: 50%;
    display: inline-block;
  }
  //商品图片
  .commodity-img{
    flex: 3;
  }
  .c-Img{
    .px2rem(width,200);
    .px2rem(line-height,150);
    margin: 0 auto;
    .px2rem(margin-top,10);
  }
  //商品详情以及购买数量
  .commodity-describe{
    flex: 6;
  }
  .commodity-name{
    .px2rem(margin-top,10);
    .px2rem(margin-left,10);
    .px2rem(font-size,35);
  }
  .commodity-dispose{
    .px2rem(margin-top,10);
    .px2rem(margin-left,10);
    .px2rem(font-size,25);
    color: #3F3F3F;
  }
  .commodity-shopprice{
    display: flex;
    .px2rem(margin-top,10);
    .px2rem(margin-left,10);
  }
  .fh{
    color: red;
    .px2rem(font-size,10);
  }
  .price{
    color: red;
  }
  .commodity-price{
    flex: 1;
  }
  .add{
    .px2rem(width,50);
    .px2rem(height,50);
    background-color: #f0f0f0;
    border: none;
    .px2rem(font-size,16);
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    .px2rem(border-radius,10)
  }
  .reduce{
    .px2rem(border-radius,10);
    .px2rem(width,50);
    .px2rem(height,50);
    background-color:#f0f0f0;
    border: none;
    .px2rem(font-size,16);
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }
  .shop-num{
    .px2rem(margin-left,10);
    .px2rem(margin-right,10);
  }
  .commodity-num{
    flex: 1;
  }


//底部购物车
  .buy{
    width: 100%;
    .px2rem(height,100);
    position: fixed;
    bottom: 0;
    .px2rem(bottom,100);
    border-bottom: 1px solid black;
    display: flex;
    z-index: 9999;
    background: white;
  }
  .buy div{
    .px2rem(line-height,100);
    .px2rem(margin-left,10);
  }
  .buy div:nth-child(1){
    .px2rem(font-size,35);
    flex: 1;
  }
  .price-total{
    .px2rem(line-height,90);
    flex:3;
    display: flex;
    .px2rem(font-size,35);
  }
  .Price-total{
    .px2rem(line-height,90);
    display: flex;
    .px2rem(font-size,35);
  }
  .buy-total{
    text-align: center;
    .px2rem(line-height,100);
    .px2rem(margin-left,30);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .buy-js{
    text-align: center;
    .px2rem(margin,5);
    .px2rem(width,280);
    background: #c12e2a;
    color: white;
    .px2rem(font-size,35);
    .px2rem(border-radius,10);
  }
</style>
<script>
    export default {
        data(){
            return {
                commodity:[
                    {id:0,name:'奥夫塔餐盘',color:'白色',price:99,num:1,img:'/',kc:10},
                    {id:1,name:'奥夫塔餐盘',color:'白色',price:75,num:7,img:'/',kc:10},
                    {id:2,name:'奥夫塔餐盘',color:'红色',price:48,num:4,img:'/',kc:10},
                    {id:3,name:'奥夫塔餐盘',color:'黑色',price:199,num:2,img:'/',kc:10}
                ],
                selectedArr:[],
                num:0,
                pd:1,
            }
        },
        computed:{
         total:function(){
           let total=0;
           this.commodity.forEach((value ,index)=> {
             if(this.$data.selectedArr[index]===true){
              total+=value.price*value.num;
            }
           });
           return total;
         }
        },
        created(){
            this.commodity.forEach((value ,index)=> {
                this.$data.selectedArr[index]=false
            });
        },
        methods:{
          selected:function(event,i){
            if(!this.selectedArr[i]){
            event.toElement.classList.add('active');
            this.$set(this.selectedArr,i,true);
            this.num++
            }else{
               event.toElement.classList.remove('active');
               this.$set(this.selectedArr,i,false);
               this.num--
            }
            console.log(this.selectedArr);
          },
          Allselect:function () {
              this.num=this.commodity.length
             this.$refs.selectItem.forEach((value,index)=>{
               value.classList.add('active');
               this.$set(this.selectedArr,index,true)
             })
          },
          AllselectCancel:function(){
              this.num=0;
             this.$refs.selectItem.forEach((value,index)=>{
               value.classList.remove('active');
               this.$set(this.selectedArr,index,false)
             })
          },
            gg:function () {
                if(!(this.pd==1)){
                    this.pd=1
                }else {
                    this.pd=2
                }
                console.log(this.pd);
            }
        }
    }
</script>